<template>
    <div>
        <el-container>
            <el-aside width="200px" class="aside_data">

                <div style="display: flex; align-items: center;padding-left: 19px;">
                    <img style="border-radius: 50%;" src="../ico/logo.png" height="50px" width="50px" />
                    <span class="logo-text-top">自由项目</span>
                </div>
                <div>
                    <el-menu active-text-color="#e2a64e" background-color="#000c17"
                    style="border-right: 0px;"
                    class="el-menu-demo" text-color="#fff" router unique-opened @open="handleOpen" @close="handleClose"
                    @select="handleSelect">
                    <div v-for="(item, i) in menuData" >
                        <el-sub-menu  :index="(i + 1)" v-if="item.childList.length > 0">
                            <template #title>
                                <el-icon>
                                    <component :is="item.icon"></component>
                                </el-icon>
                                <span>{{ item.name }}</span>
                            </template>
                            <div v-for=" (item2, i2) in item.childList">
                                <el-sub-menu v-if="item2.childList.length > 0" :index="(i + 1) + '-' + (i2 + 1)">
                                    <template #title>{{ item2.name }}</template>
                                    <div v-for=" (item3, i3) in item2.childList">
                                        <el-menu-item v-if="item2.childList.length > 0"
                                            :index="(i + 1) + '-' + (i2 + 1) + '-' + (i3 + 1)" :route="item3.routerUrl">
                                            <el-icon>
                                                <component :is="item3.icon"></component>
                                            </el-icon>
                                            <template #title>{{ item3.name }}</template>
                                        </el-menu-item>
                                    </div>
                                </el-sub-menu>
                                <el-menu-item v-if="item2.childList.length <= 0" :index="(i + 1) + '-' + (i2 + 1)"
                                    :route="item2.routerUrl">
                                    <el-icon>
                                        <component :is="item2.icon"></component>
                                    </el-icon>
                                    <span>{{ item2.name }}</span>
                                </el-menu-item>
                            </div>
                        </el-sub-menu>
                        <el-menu-item :index="(i + 1)" v-if="item.childList.length <= 0" :route="item.routerUrl">
                            <el-icon>
                                <component :is="item.icon"></component>
                            </el-icon>
                            <span>{{ item.name }}</span>
                        </el-menu-item>
                    </div>
                </el-menu>
                </div>

            </el-aside>
            <el-container style="height: 100vh;">
                <el-header class="header-background" style=" border-radius: 8px 8px 8px 8px; height: 5vh;">
                    <heand />
                </el-header>
                <el-main class="card" style="margin-top:10px;padding: 4px;height: 98vh;"><router-view /></el-main>
                <!-- <el-footer style="text-align: center;">内容由AI生成，无法确保真实准确，仅供参考，基于
文心大模型, 请遵守用户协议、个人信息保护规则</el-footer> -->
            </el-container>
        </el-container>
    </div>
</template>

<style>
.logo-text-top {
    margin-left: 20px;
    font-size: 15px;
    font-weight: bold;
    /* 字体倾斜 */
    transform: skewY(16deg);
    display: inline-block;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    /* 文字阴影 */
    background: linear-gradient(to right, #9103f0, #fafafa);
    /* 渐变背景 */
    -webkit-background-clip: text;
    /* 背景裁剪到文本 */
    background-clip: text;
    color: transparent;
    /* 隐藏原始文本颜色 */
}

.header-background {
    /* background-image: linear-gradient(to right bottom, #dddffa, #d2e4ff, #c8e9ff, #c1eefc, #bff2f5, #c3f4ef, #c9f6e8, #d2f7e2, #dbf8de, #e5f8db, #eff8da, #f8f8da); */
    /* background-image: linear-gradient(to right top, #edbff2, #d5cdff, #c3d9ff, #bce2fe, #c2e9f5, #c5ecf1, #c9eeed, #d0f0e9, #cdf1e5, #ccf2e0, #cdf2d9, #cff2d2); */
    /* background: linear-gradient(to right, #f5f6ff, #e3e4fa4a) */
    /* background-image: linear-gradient(to right top, #f4d7f6, #dae3ff, #c6edff, #c6f4f5, #d7f6e5); */
    background-image: radial-gradient(circle, #f4d7f6, #dae3ff, #c6edff, #c6f4f5, #d7f6e5);
}

.aside_data {
    height: 100vh;
    color: aliceblue;
    background-color: #000c17;
    /* padding-left: 10px; */
    padding-top: 10px;
    /* padding-bottom: 30px; */
}

.card {
    border-radius: 8px 8px 8px 8px;
    /* background-color: rgb(255 255 255); */
    /* background-image: radial-gradient(circle, #dddffa, #d2e4ff, #c8e9ff, #c1eefc, #bff2f5, #c3f4ef, #c9f6e8, #d2f7e2, #dbf8de, #e5f8db, #eff8da, #f8f8da); */
    /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02); */
}
</style>
<script lang="ts" setup>
// import {
//     Document,
//     Menu as IconMenu,
//     Location,
//     Setting,
// } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import heand from '../components/header.vue'
import menu from '@/api/menu/menu.js'
import { ref, onMounted } from 'vue'

const menuData = ref([])
const router = useRouter();
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {

    console.log(key, keyPath)
}
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const tiaozhuang = (url: string) => {
    if (url) {
        router.push(url);
    }
}
onMounted(() => {
    menu.getAllList().then(data => {
        menuData.value = data.data
    })
})
</script>